<template>
    <div>
        <van-nav-bar title="首页" />

        <van-search v-model="value" show-action label="北京" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>

        <van-grid>
            <van-grid-item icon="coupon-o" text="电器" />
            <van-grid-item icon="cart-o" text="家具" />
            <van-grid-item icon="gem-o" text="电子" />
            <van-grid-item icon="gold-coin-o" text="日用" />
            <van-grid-item icon="gold-coin-o" text="厨卫" />
            <van-grid-item icon="vip-card-o" text="服装" />
            <van-grid-item icon="hot-o" text="箱包" />
            <van-grid-item icon="logistics" text="图书" />
        </van-grid>

        <div class="a1">
            <div class="a2" style="width: 180px; height: 200px; background: turquoise; float: left;"><van-image
                    width="10rem" height="10rem" fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" /></div>
            <div class="a2" style="width: 180px; height: 300px; background: turquoise; float: left; margin-left: 15px;">
                <van-image width="10rem" height="10rem" fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </div>
            <div class="a2" style="width: 180px; height: 260px; background: turquoise; float: left;"><van-image
                    width="10rem" height="10rem" fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" /></div>
            <div class="a2"
                style="width: 180px; height: 240px; background: turquoise; float: left;margin-left: 15px; margin-top: 20px;">
                <van-image width="10rem" height="10rem" fit="contain"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const onSearch = (val) => {
    router.push('/search')
}
</script>

<style>
.a1 {
    width: 100%;
    height: 900px;
    /* background-color: violet; */
}
</style>